<template>
  <div class="modo">
    <header class="bookxq">
      <div class="title">
        <router-link to class="left">
          <span class="ui-leftaw-2" @click="$router.back(-1)"></span>
        </router-link>
        <div class="tit-top">
          <h3>{{ list_title }}</h3>
          <router-link to="/home" class="home">首页</router-link>
        </div>
      </div>
    </header>
    <loading v-if="isLoading"></loading>
    <div v-else class="modo-body">
      <div class="booklist">
        <ul>
          <li v-for="(item,k) in book_list">
            <router-link :to="`/cs?id=${item.id}&title=${item.title}`">
              <div class="book-1">
                <img v-load="item.cover" :src="error" alt="" />
              </div>
              <div class="text-1">
                <h4>{{item.title}}</h4>
                <p class="name-1">{{item.author}}|<span>{{item.category}}</span></p>
                <p class="p-1">简介:{{ item.content}}</p>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import Loading from "@/components/loading/index.vue";
import error from "@/assets/noimg.png";
import { reFunc } from "@/request/index";
export default {
  directives:{
    load(el,options){
      let img = new Image()
      img.src = options.value;
      img.onload=()=>{
        el.src =options.value
      }
    }
  },
  data() {
    return {
      error,
      isLoading: true,
      list_title: this.$route.query.list_title,
      list_url: decodeURI(this.$route.query.url),
      list_id: this.$route.query.uuid,
      book_list: [],
      bsllist: [],
    };
  },
  components: { Loading },
  methods: {
    async url() {
      let url = this.list_url + "&uuid=" + this.list_id;
      // console.log(url);
      await reFunc(url).then((lis) => {
        // console.log(lis.list);
        this.book_list=lis.list
        this.isLoading = false;
      }).catch(err => {
          console.log("请求失败...");
        });
    },
  },
  created() {
    // console.log(this.$route.query);
    this.url();
  },
};
</script>
<style lang="scss">
@import url(../static/css/reset.css);
.modo {
  .bookxq {
    width: 100%;
    background-color: black;
    min-width: 362px;
    .title {
      margin: auto 1%;
      height: 44px;
      line-height: 44px;
      a.left {
        float: left;
        font-size: 14px;
        .ui-leftaw-2 {
          display: inline-block;
          margin-bottom: 3px;
          margin-left: 15px;
          margin-right: 15px;
          vertical-align: middle;
          width: 10px;
          height: 18px;
          background: url(../static/imgs/arrow-left.png);
          background-size: 100% 100%;
        }
      }
      .tit-top {
        padding: 0 2%;
        box-sizing: border-box;
        text-align: center;
        h3 {
          width: 80%;
          display: inline-block;
          color: white;
        }
        a {
          display: inline-block;
          &.home {
            width: 10%;
            height: 28px;
            line-height: 28px;
            color: #fff;
            background: #000;
            font-size: 15px;
            padding: 0;
            text-align: right;
          }
        }
      }
    }
  }
  .booklist {
    width: 100%;
    // background: black;
    ul {
      li {
        margin-top: 5px;
        display: flex;
        box-sizing: content-box;
        border-bottom: #dcdcdc solid 1px;
        [class^="book"] {
          width: 93px;
          margin: 9px;
          float: left;
          img {
            width: 94px;
            height: 100%;
            border-radius: 5px;
          }
        }
        [class^="text"] {

          padding-top: 10px;
          color: #333;
          outline: none;
          padding-left: 10px;
          text-align: start;
          h4 {
            font-size: 15px;
            line-height: 19px;
            height: 38px;
            max-height: 38px;
          }
          [class^="name"] {
            color: #888;
            line-height: 15px;
            height: 15px;
            font-size: 12px;
            margin-bottom: 5px;
            -webkit-line-clamp: 2;
            overflow: hidden;
            span {
              margin-left: 2px;
            }
          }
          [class^="p"] {
            color: #888;
            line-height: 18px;
            height: 36px;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>